/**
 * Created by guiyongdong on 16/6/7.
 */

'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
    Dimensions
} from 'react-native';

export default class PlusNumber extends  Component {
    // 构造
    constructor(props) {
        super(props);
        var good = props.good;
        this.updateGood(good);
    }
    updateGood(good){
        var number = good['number'];
        if (number){
            var isHidden = number === 0;
            // 初始状态
            this.state = {
                isHidden:isHidden,
                num:number,
                good:good
            };
        }else {
            this.state = {
                isHidden:true,
                num:0,
                good:good
            };
        }
    }
    _addButtonClick() {
        var number = this.state.num;
        number = number + 1;
        var good = this.state.good;
        if (good['stock'] < number){
            return;
        }
        good['number'] = number;
        this.setState({
            isHidden:false,
            num:number,
            good:good
        });
        if (this.props.addButtonClick){
            this.props.addButtonClick(good);
        }
    }
    _minButtonClick () {
        var number = this.state.num;
        number = number -1;
        var good = this.state.good;
        good['number'] = number;
        
        if (number <= 0){
            number = 0;
        }
        if (number == 0){
            this.setState({
                isHidden:true,
                num:0,
                good:good
            });
        }else {
            this.setState({
                isHidden:false,
                num:number,
                good:good
            });
        }
        if (this.props.minButtonClick){
            this.props.minButtonClick(good);
        }
    }

    render() {
        var addButtonStyle = styles.addButton;
        var minButton;
        var textView;
        if (!this.state.isHidden) {
            addButtonStyle = styles.addButton2;

            minButton = <TouchableOpacity onPress={this._minButtonClick.bind(this,null)} activeOpacity={0.8} key='1'>
                    <Image style={styles.reducebutton} source={require('../resoure/main/reduce@3x.png')} key={'plus'}/>
                </TouchableOpacity>;


            textView = <View style={styles.textView} key='2'>
                    <Text style={styles.text} ref="number">{this.state.num}</Text>
                </View>;
        }
        return(
            <View style={this.props.style}>
                {minButton}
                {textView}
                <TouchableOpacity onPress={this._addButtonClick.bind(this,null)} activeOpacity={0.8}>
                    <Image style={addButtonStyle} source={require('../resoure/main/PLUS@3x.png')}/>
                </TouchableOpacity>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    addButton:{
        marginLeft:70,
        marginTop:0,
        width:28,
        height:28
    },
    textView:{
        marginLeft:0,
        marginTop:0,
        height:30,
        width:42,
        alignItems:'center',
        justifyContent:'center'
    },
    text:{
        fontSize:17,
        color:'#282828'
    },
    reducebutton:{
        marginLeft:0,
        marginTop:0,
        width:28,
        height:28
    },

    addButton2:{
        marginLeft:0,
        marginTop:0,
        width:28,
        height:28
    }
});